<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>高亮显示图片</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="img/01.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/02.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/03.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/04.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/05.jpg" alt=""></a>
            </li>
            <li>
                <a href="#"><img src="img/06.jpg" alt=""></a>
            </li>
        </ul>
    </div>
</body>
<script>
    var lis = document.querySelectorAll('li');
    var showhide;
    for (var i = 0; i < lis.length; i++) {
        lis[i].addEventListener('click', function() {
            clearInterval(showhide);
            showhide = setInterval(() => {
                if (getComputedStyle(this).opacity == 1) {
                    clearInterval(showhide);
                } else {
                    var opacityed = getComputedStyle(this).opacity + 0.1;
                    this.style.opacity = opacityed;
                };
            }, 30);
        });
    };
</script>

</html>